<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ include file="inc/taglibs.jsp" %>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <%@ include file="inc/meta.jsp" %>
    <meta name="description" content="">
    <meta name="author" content="">
    <title>消息管理</title>
    <%@ include file="inc/css.jsp" %>
</head>
<body>

<div id="posts" class="wrapper">

    <%@ include file="inc/nav.jsp" %>

    <div id="page-wrapper">
        <div class="row">
            <div class="col-lg-12">
                <h1 class="page-header">消息管理</h1>
                <h4 style="margin-left: 10px;" id="showH">——新增消息</h4>
            </div>
        </div>

        <div class="row">
            <div class="col-lg-12">
                <div class="panel panel-default">
                    <!-- /.panel-heading -->
                    <div class="panel-body">
                        <form id="messageForm" method="post" action="backend/message/save" class="form-horizontal nice-validator n-default" role="form" novalidate="novalidate">
                            <input type="hidden" id="messageId" name="id" value="${message.id}"/>
                            <input type="hidden" id="messageType" value="${message.type}"/>
                            <input type="hidden" id="ids" value="${ids}"/>

                            <div class="form-group">
                                <label class="col-sm-2 control-label">消息名称:</label>

                                <div class="col-sm-4">
                                    <input type="text" class="form-control" id="name" name="name" maxlength="20" data-rule="required" value="${message.name}" placeholder="请输入消息名称"/>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label">发送对象:</label>

                                <div class="col-sm-6">
                                    <div style="float: left;border: 1px solid #cfcfcf;padding: 6px;border-radius: 4px">
                                        <input type="radio" name="type" value="1" id="allUser" checked onchange="message.fn.findAllUser()"/>全部用户
                                        <input type="radio" name="type" value="2" id="wxUser" onchange="message.fn.findWxUser(true)"/>微信用户
                                        <input type="radio" name="type" value="3" id="appUser" onchange="message.fn.findAppUser(true)"/>APP用户
                                    </div>
                                </div>
                            </div>

                            <div class="form-group" id="accountDiv" style="display: none">
                                <label class="col-sm-2 control-label"></label>

                                <div class="col-sm-8" style="padding-top: 5.5px;border: 1px dashed #000000;margin-left: 15px;padding-bottom: 8px;">
                                    <input type="text" id="searchText" class="form-control" style="width: 200px" placeholder="请输入筛选条件"/>
                                    <br>
                                    <div id="wxUserDiv" style="display: none"></div>
                                    <div id="appUserDiv" style="display: none"></div>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label">消息详情:</label>
                                <div class="col-sm-9">
                                    <textarea cols="40" rows="8" class="form-control" style="resize: none;" name="content" id="content">${message.content}</textarea>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label">发送时间:</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control input-append date form_datetime" style="width: 180px;" readonly id="sendTime" name="sendTime" maxlength="20" value="${fn:substring(message.sendTime, 0, 19)}" placeholder="请选择发送时间"/>
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="col-sm-12" style="text-align: center">
                                    <button type="button" class="btn btn-primary" onclick="message.fn.subInfo()">提交</button>
                                    <button type="button" class="btn btn-primary" onclick="message.fn.goBack()">返回</button>
                                </div>
                            </div>
                        </form>
                    </div>
                    <!-- /.panel-body -->

                </div>
                <!-- /.panel -->
            </div>
        </div>

    </div>
    <!-- /#page-wrapper -->

</div>
<!-- /#wrapper -->

<%@ include file="inc/footer.jsp" %>

</body>
<script type="text/javascript">
    var message = {
        v: {
            id: "message",
            list: [],
            dTable: null,
            idsArray: []
        },
        fn: {
            init: function () {
                $.ajaxSetup({
                    async: false
                });

                if ($("#productId").val() != "") {
                    $("#showH").text("——编辑消息");
                }

                $('.form_datetime').datetimepicker({
                    language: 'zh-CN',
                    weekStart: 1,
                    todayBtn: 1,
                    autoclose: 1,
                    todayHighlight: 1,
                    startView: 2,
                    forceParse: 0,
                    showMeridian: 1,
                    format: 'yyyy-mm-dd hh:ii:ss'
                });

                message.fn.loadData();
            },
            loadData: function () {
                var ids = $('#ids').val();
                if (ids != '') {
                    message.v.idsArray = ids.split(',');
                }

                var messageType = $('#messageType').val();
                if (null == messageType || messageType == '' || messageType == 1) {
                    message.fn.findAllUser();
                } else {
                    if (messageType == 2) {
                        $('#wxUser').prop('checked', true);
                        message.fn.findWxUser(false);
                    } else {
                        $('#appUser').prop('checked', true);
                        message.fn.findAppUser(false);
                    }
                }

                $('#searchText').change(function () {
                    var wxUser = $('#wxUser');
                    var appUser = $('#appUser');

                    if (wxUser.prop('checked')) {
                        // 加载所有的微信用户
                        message.fn.findWxUser(true);
                    }

                    if (appUser.prop('checked')) {
                        // 加载所有的微信用户
                        message.fn.findAppUser(true);
                    }
                });
            },
            checkData: function () {
                var flag = true;
                var name = $('#name').val();
                var content = $('#content').val();
                var sendTime = $('#sendTime').val();
                var type = $('input:radio:checked').val();

                if (null == name || name == '') {
                    $sixmac.notify('消息名称不能为空', "error");
                    flag = false;
                    return;
                }

                switch (Number(type)) {
                    case 1:
                        // 全部用户，直接跳过，不作验证
                        break;
                    case 2:
                        // 微信用户，验证微信用户必须选中一个
                        var wxUserLen = $('input:checkbox[name=wxUser]:checked').length;
                        if (wxUserLen == 0) {
                            $sixmac.notify('至少选择一个微信用户', "error");
                            flag = false;
                            return;
                        }
                        break;
                    case 3:
                        // APP用户，验证APP用户必须选中一个
                        var appUserLen = $('input:checkbox[name=appUser]:checked').length;
                        if (appUserLen == 0) {
                            $sixmac.notify('至少选择一个APP用户', "error");
                            flag = false;
                            return;
                        }
                        break;
                }

                if (null == content || content == '') {
                    $sixmac.notify('消息详情不能为空', "error");
                    flag = false;
                    return;
                }

                if (null == sendTime || sendTime == '') {
                    $sixmac.notify("请选择发送时间", "error");
                    flag = false;
                    return;
                }

                return flag;
            },
            subInfo: function () {
                // 所有的验证通过后，执行新增操作
                if (message.fn.checkData()) {
                    $("#messageForm").ajaxSubmit({
                        dataType: "json",
                        success: function (data) {
                            if (data == 1) {
                                window.location.href = _basePath + "backend/message/index";
                            } else if (data == -1) {
                                $sixmac.notify("请输入正确的发送时间", "error");
                            } else {
                                $sixmac.notify("操作失败", "error");
                            }
                        }
                    });
                }
            },
            findAllUser: function () {
                var allUser = $('#allUser');
                if (allUser.prop('checked')) {
                    $('#accountDiv').css('display', 'none');
                    $('#appUserDiv').html('');
                    $('#wxUserDiv').html('');
                }
            },
            findWxUser: function (flag) {
                if (flag) {
                    message.v.idsArray = [];
                }

                var wxUser = $('#wxUser');
                if (wxUser.prop('checked')) {
                    // 加载所有的微信用户
                    $('#appUserDiv').html('');
                    $('#wxUserDiv').html('');
                    $sixmac.ajax("common/wxUserList", {
                        nickName: $('#searchText').val()
                    }, function (result) {
                        if (null != result) {
                            // 获取返回的微信用户列表信息，并循环绑定到label中
                            var content = "";
                            jQuery.each(result, function (i, item) {
                                if (message.v.idsArray.indexOf(item.id + '') == -1) {
                                    content += '<div style="float: left;margin-right: 20px;width: 200px"><input type="checkbox" name="wxUser" value="' + item.id + '" />' + item.nickname + '</div>';
                                } else {
                                    content += '<div style="float: left;margin-right: 20px;width: 200px"><input type="checkbox" checked name="wxUser" value="' + item.id + '" />' + item.nickname + '</div>';
                                }
                            });
                            $('#wxUserDiv').html(content);
                            $('#wxUserDiv').css('display', '');
                            $('#appUserDiv').css('display', 'none');
                            $('#accountDiv').css('display', '');
                        } else {
                            $sixmac.notify("获取微信用户信息失败", "error");
                        }
                    });
                }
            },
            findAppUser: function (flag) {
                if (flag) {
                    message.v.idsArray = [];
                }

                var appUser = $('#appUser');
                if (appUser.prop('checked')) {
                    // 加载所有的app用户
                    $('#appUserDiv').html('');
                    $('#wxUserDiv').html('');
                    $sixmac.ajax("common/appUserList", {
                        mobile: $('#searchText').val()
                    }, function (result) {
                        if (null != result) {
                            // 获取返回的APP用户列表信息，并循环绑定到label中
                            var content = "";
                            jQuery.each(result, function (i, item) {
                                if (message.v.idsArray.indexOf(item.id + '') == -1) {
                                    content += '<div style="float: left;margin-right: 20px;width: 150px"><input type="checkbox" name="appUser" value="' + item.id + '" />' + item.mobile + '</div>';
                                } else {
                                    content += '<div style="float: left;margin-right: 20px;width: 150px"><input type="checkbox" checked name="appUser" value="' + item.id + '" />' + item.mobile + '</div>';
                                }
                            });
                            $('#appUserDiv').html(content);
                            $('#appUserDiv').css('display', '');
                            $('#wxUserDiv').css('display', 'none');
                            $('#accountDiv').css('display', '');
                        } else {
                            $sixmac.notify("获取APP用户信息失败", "error");
                        }
                    });
                }
            },
            goBack: function () {
                window.location.href = "backend/message/index";
            }
        }
    }

    $(document).ready(function () {
        message.fn.init();
    });

</script>

</html>